<!-- @/components/AlarmCenter.vue -->
<script setup>
import { computed, ref } from 'vue';
import { ElImage } from 'element-plus';
import { useAlarmCenterStore } from '@/stores/alarmCenter';

const alarmStore = useAlarmCenterStore();

const currentAlarm = computed(() => alarmStore.currentAlarm);
const initialIndexImage = ref(0);

// 格式化时间
const formatTime = (date) => {
  return date.toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
  });
};

// 关闭单条告警
const handleClose = () => {
  alarmStore.removeAlarm();
};

const onPreviewImg = (i) => {
  initialIndexImage.value = i;
};
</script>

<template>
  <div v-if="alarmStore.currentAlarm" class="alarm-center">
    <div class="alarm-list relative p-20px color-#fff">
      <button class="close-btn absolute right-20px z-1 flex-center" @click="handleClose">×</button>

      <div class="alarm-item">
        <div class="alarm-content">
          <div>
            <p class="alarm-title text-20px">
              {{
                ['PERSON', 'FIRE_PTZ', 'UAV'].includes(currentAlarm.type)
                  ? '火情事件'
                  : ['URGENT_EVENT'].includes(currentAlarm.type)
                  ? '紧急事件'
                  : '卡口事件'
              }}<template>-[事件类型]</template>
            </p>
            <div class="alarm-time mt-8px w-100% text-right">接收时间:{{ formatTime(currentAlarm.timestamp) }}</div>
          </div>
          <div class="mt-30px">
            <div class="row-box">
              <div class="item">
                <div class="label mr-5px text-nowrap">预警时间:</div>
                <div class="value color-#fff">{{ currentAlarm?.createdDate || '--' }}</div>
              </div>
            </div>
            <div class="row-box">
              <div class="item">
                <div class="label mr-5px text-nowrap">数据源:</div>
                <div class="value color-#fff">{{ currentAlarm?.origin || '--' }}</div>
              </div>
            </div>
            <div class="row-box">
              <div class="item">
                <div class="label mr-5px text-nowrap">行政区划:</div>
                <div class="value color-#fff">{{ currentAlarm?.deptName || '--' }}</div>
              </div>
            </div>

            <div class="row-box">
              <div class="item">
                <div class="label mr-5px text-nowrap">照片:</div>
                <div v-if="currentAlarm?.pics?.length" class="value color-#fff">
                  <ElImage
                    v-for="(url, index) in currentAlarm?.pics.slice(0, 2)"
                    :key="index"
                    style="width: 80px; height: 80px; margin-right: 10px"
                    :src="url.url"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    :preview-src-list="currentAlarm?.pics?.map((item) => item.url)"
                    show-progress
                    fit="cover"
                    :initial-index="initialIndexImage"
                    @show="onPreviewImg(index)"
                  />
                </div>
                <div v-else class="value color-#fff">{{ '--' }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.alarm-center {
  position: fixed;
  right: 20px;
  bottom: 10px;
  z-index: 9999;
  width: 360px;
  // max-height: 400px;
  font-size: 14px;
}

.alarm-list {
  display: flex;
  flex-direction: column;
  // max-height: 400px;
  // overflow: auto;
  background: rgba(240, 43, 43, 0.507);
  border-radius: 8px;
  box-shadow: inset 0 0 20px rgba(255, 0, 0, 0.7), 0 4px 12px rgba(0, 0, 0, 0.2);
}

.alarm-item {
  position: relative;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 10px 12px 16px;
}

.alarm-item:last-child {
  border-bottom: none;
}

.alarm-content {
  flex: 1;
  white-space: pre-wrap;
  word-break: break-word;
}
.alarm-title {
  font-family: WDCH;
}

.alarm-time {
  flex-shrink: 0;
  color: #fff;
  font-size: 14px;
}

.close-btn {
  flex-shrink: 0;
  width: 25px;
  height: 25px;
  color: white;
  font-size: 16px;
  background: #ff4d4f;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.close-btn:hover {
  background: #d90000;
}

.row-box {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
  margin-bottom: 10px;
  .item {
    display: flex;
    align-items: flex-start;
  }
}

.label {
  margin-bottom: 5px;

  font-size: 16px;
  font-family: Source Han Sans CN, Source Han Sans CN-Normal;
}

.value {
  font-size: 16px;
  font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Regular;
  .wifi-symbol {
    position: relative;
    top: 0px;
    width: 107px;
    height: 30px;
    min-height: 30px;
    background-color: rgba(145, 193, 220, 0.25);
    border-radius: 4px;

    @-webkit-keyframes list {
      0% {
        -webkit-transform: scaley(1);
        transform: scaley(1);
      }

      50% {
        -webkit-transform: scaley(0.4);
        transform: scaley(0.4);
      }
      100% {
        -webkit-transform: scaley(1);
        transform: scaley(1);
      }
    }
    @keyframes list {
      0% {
        -webkit-transform: scaley(1);
        transform: scaley(1);
      }

      50% {
        -webkit-transform: scaley(0.4);
        transform: scaley(0.4);
      }

      100% {
        -webkit-transform: scaley(1);
        transform: scaley(1);
      }
    }

    .list {
      div {
        display: inline-block;
        width: 3px;
        height: 30px;
        margin-right: 3px;
        background-color: #46ccff;
        border-radius: 2px;
        -webkit-animation: list 0.9s 0s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
        animation: list 0.9s 0s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        &:nth-child(1),
        &:nth-child(2) {
          -webkit-animation-delay: 0.2s !important;
          animation-delay: 0.2s !important;
        }

        &:nth-child(3),
        &:nth-child(4) {
          -webkit-animation-delay: 0.4s !important;
          animation-delay: 0.4s !important;
        }
      }
    }
  }
}
</style>
